<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 实例</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
    .container {
        width: 80%;
        margin: 0 auto;
        border: 1px solid #cccccc;
        border-radius: 10px;
        padding: 40px;
    }

    table {
        margin-top: 40px;
    }
</style>
<body>

<div class="container">
    <form class="form-inline">
        <label for="city">请选择城市:</label>
        <input type="text" class="form-control" id="city" placeholder="请选择城市" v-model="city">
        <button type="button" class="btn btn-primary" v-on:click="search">查询</button>
    </form>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th><input type="checkbox"></th>
            <th>城市</th>
            <th>日期</th>
            <th>温度</th>
            <th>天气情况</th>
            <th>风向</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in info">
            <td><input type="checkbox"></td>
            <td>{{ city }}</td>
            <td>{{ item.date }}</td>
            <td>{{ item.temperature }}</td>
            <td>{{ item.weather }}</td>
            <td>{{ item.direct }}</td>
            <td><input type="button" value="删除"></td>
        </tr>
        </tbody>
    </table>
</div>
</body>
<script>
    //实例化vue
    new Vue({
        el: '.container', //挂载点
        data() {
            return {
                info: null,
                city: null
            }
        },
        mounted() {

        },
        methods: {
            search: function () {
                var token = localStorage.getItem('token');
                _this = this;
                axios({
                    method: 'post',
                    url: 'http://www.1906a.com/weather?token=' + token,
                    data: {
                        city: _this.city,
                    }
                })
                    .then(function (response) {
                        var data = response.data;
                        console.log(data);
                        if (data.error_code == 0) {
                            _this.info = data.result.future;
                            _this.city = data.result.city;
                        }
                    })
                    .catch(function (error) { // 请求失败处理
                        console.log(error);
                    });
            }
        }
    })
</script>
</html>
